<template>
  <div class="search_box">
    <input
      type="text"
      class="txt_search"
      v-model="search_str"
      placeholder="请输入要搜索的内容"
    />
    <button class="btn_search" @click="search_click">搜索</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";

const emits = defineEmits(["search_click"]);

const search_str = ref("");

const search_click = () => {
  if (!search_str.value) {
    ElMessageBox.confirm(
      "您还未输入需要搜索的内容,如果您想查看所有博客请点击确定,如果不想返回则点击取消!",
      "提示!!!",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    )
      .then(() => {
        emits("search_click", search_str.value);
      })
      return
  }
  emits("search_click", search_str.value);
};
</script>

<style scoped lang="less">
.search_box {
  width: 100%;
  background-color: @tmb;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0;
  border-radius: @dyj;
  border: @xborder solid @qls;
  box-sizing: border-box;

  input {
    height: 0.3rem;
    width: 75%;
    border: @xborder solid @ls;
    outline-style: none;
    background-color: transparent;
    border-right: none;
    box-sizing: border-box;
    color: @hui_font;
    text-indent: 0.1rem;
    font-size: 0.2rem;
  }

  button {
    height: 0.3rem;
    width: 15%;
    border: none;
    box-sizing: border-box;
    background-color: transparent;
    border: @xborder solid @ls;
    cursor: pointer;
    color: @ls;
    font-size: 0.16rem;
  }
}
</style>
